<template>
  <a-row>
    <a-col :xs="22" :md="8">
      <div :class="getAppLogoClass">
        <!-- 修改为与AppLogo.vue相同用法，引用img文件在build时报错 -->
        <!-- <img src="../../../../images/logo-ceic.webp" /> -->
        <img v-if="projectCode === 'yzh'" class="logoImage-yzh" @click="onGotoCmsHomeClick" />
        <img v-else-if="projectCode === 'ky'" class="logoImage-ky" @click="onGotoCmsHomeClick" />
        <img v-else class="logoImage-qc" @click="onGotoCmsHomeClick" />
        <!-- <img :src="logoImg" /> -->
        <!-- <img src="../../../../images/logo-ceic.jpg" /> -->
        <!-- 在AppLogo.vue中可以正常使用，在此build时报错，原因未知 -->
        <!-- <img src="../../../../images/logo.png" /> -->
      </div>
    </a-col>
    <!-- <a-col :xs="6">
      <div class="cms-header-system-title" style="vertical-align: middle">国能阳宗海发电有限公司</div>
    </a-col> -->
    <!-- 设为首页和搜索框显示为1行，栏目菜单显示为1整行 -->
    <!-- <a-col :xs="16">
      <a-row>
        <a-col class="cms-header-title-right"
          ><a-space size="small">
            <span>收藏网站</span>
            <a-divider type="vertical" style="border-color: black" />
            <span>设为首页</span>
            <a-divider type="vertical" style="border-color: black" />
            <span>管理后台</span>
            <a-input-search
              v-model:value="searchKeyword"
              placeholder="输入关键字"
              enter-button="搜索新闻"
              size="default"
              @search="onSearch"
            /> </a-space
        ></a-col>
      </a-row>
      <a-row>
        <a-col class="cms-header-title-right">
          <a-menu
            v-model:selectedKeys="currentCategoryIds"
            mode="horizontal"
            class="top-tabs"
            @click="menuItemClick"
            :selectable="false"
          >
            <a-sub-menu
              v-for="level1Category in categories"
              :key="level1Category.info.id"
              :index="level1Category.info.name"
            >
              <template #title>
                <span @click="menuClick(level1Category)">{{ level1Category.info.name }}</span>
              </template>
<a-menu-item v-for="level2Category in level1Category.childs" :key="level2Category.id">
  <span>
    <span>{{ level2Category.name }}</span>
  </span>
</a-menu-item>
</a-sub-menu>
</a-menu>
</a-col></a-row>
</a-col> -->
    <!-- 采用2行显示，第1行显示设为首页和搜索框，第2行显示栏目菜单 -->
    <a-col :xs="2" :md="16">
      <!-- 根据不同的项目显示不同的(分为：阳宗海、开远、其他--渠成) -->
      <a-row v-if="projectCode === 'yzh'">
        <a-col class="cms-header-title-right">
          <div class="cms-optional-part">
            <a-space size="small">
              <span @click="onSetHomeClick(this)">设为首页</span>
              <a-divider type="vertical" style="border-color: black" />
              <!-- <span @click="onSetHomeClick(this)" class="text-red-600 text-base font-semibold">集团公司首页 </span> -->
              <a
                href="http://www.chnenergy.com.cn/"
                target="_blank"
                style="
                  color: #ff0000;
                  font-family: 'Microsoft Yahei';
                  font-weight: bold;
                  font-size: 16px;
                "
              >
                集团公司首页
              </a>
              <a-divider type="vertical" style="border-color: black" />
              <a
                href="http://10.113.216.82/"
                target="_blank"
                style="
                  color: #ff0000;
                  font-family: 'Microsoft Yahei';
                  font-weight: 500;
                  font-size: 16px;
                "
              >
                云南公司首页
              </a>
              <a-divider type="vertical" style="border-color: black" />
              <span @click="onAddFaroriteClick">收藏网站</span>
              <a-divider type="vertical" style="border-color: black" />
              <span @click="onGotoCmsManagementClick">管理后台</span>
              <a-divider type="vertical" style="border-color: black" />
              <span v-if="userStore.getToken != undefined && userStore.getToken != null">
                当前访客身份: {{ userStore.getUserInfo.realName }}
              </span>
              <span v-else>当前访客身份: 游客 [<span @click="toLogin">登录</span>]</span>
            </a-space>
          </div>
        </a-col>
      </a-row>
      <a-row v-else-if="projectCode === 'ky'">
        <a-col class="cms-header-title-right">
          <div class="cms-optional-part">
            <a-space size="small">
              <span @click="onSetHomeClick(this)">设为首页</span>
              <a-divider type="vertical" style="border-color: black" />
              <!-- <span @click="onSetHomeClick(this)" class="text-red-600 text-base font-semibold">集团公司首页 </span> -->
              <a
                href="http://www.chnenergy.com.cn/"
                target="_blank"
                style="
                  color: #ff0000;
                  font-family: 'Microsoft Yahei';
                  font-weight: bold;
                  font-size: 16px;
                "
              >
                集团公司首页
              </a>
              <a-divider type="vertical" style="border-color: black" />
              <a
                href="http://10.113.216.82/"
                target="_blank"
                style="
                  color: #ff0000;
                  font-family: 'Microsoft Yahei';
                  font-weight: 500;
                  font-size: 16px;
                "
              >
                云南公司首页
              </a>
              <a-divider type="vertical" style="border-color: black" />
              <span @click="onAddFaroriteClick">收藏网站</span>
              <!-- <a-divider type="vertical" style="border-color: black" /> -->
              <!-- <span @click="" class="text-red-500 font-bold">联系我们</span> -->
              <!-- 开远公司显示人力资源、SIS入口 -->
              <!-- <a
              href="http://hrs.xlt.cgdc.com.cn:8080/"
              target="_blank"
              class="text-gray-900 font-bold"
            >
              人力资源员工自助
            </a> -->
              <a-divider type="vertical" style="border-color: black" />
              <a
                href="http://10.213.1.40:8888/KYSIS/"
                target="_blank"
                class="text-red-500 font-bold"
              >
                SIS系统
              </a>
              <a-divider type="vertical" style="border-color: black" />
              <span @click="onGotoCmsManagementClick">管理后台</span>
              <a-divider type="vertical" style="border-color: black" />
              <span v-if="userStore.getToken != undefined && userStore.getToken != null">
                当前访客身份: {{ userStore.getUserInfo.realName }}
              </span>
              <span v-else>当前访客身份: 游客 [<span @click="toLogin">登录</span>]</span>
            </a-space>
          </div>
        </a-col>
      </a-row>
      <a-row v-else>
        <a-col class="cms-header-title-right"
          ><a-space size="small">
            <div class="cms-optional-part">
              <span class="text-red-500 text-md font-bold"
                >业务咨询(售前)：181 8712 0891 (微信同号)</span
              >
              <a-divider type="vertical" style="border-color: black" />
              <span @click="onGotoCmsManagementClick">管理后台</span>
              <a-divider type="vertical" style="border-color: black" />
              <span v-if="userStore.getToken != undefined && userStore.getToken != null">
                当前访客身份: {{ userStore.getUserInfo.realName }}
              </span>
              <span v-else>当前访客身份: 游客 [<span @click="toLogin">登录</span>]</span>
            </div>
          </a-space></a-col
        >
      </a-row>
      <a-row class="cms-optional-part">
        <a-col class="cms-header-title-right">
          <a-space size="small">
            <span v-if="dutyText.length > 0x0" @click="gotoCmsDuty">{{ dutyText }}</span>
            <a-divider v-if="dutyText.length > 0x0" type="vertical" style="border-color: black" />
            <a-input v-model:value="searchKeyword" size="small" placeholder="输入关键字" />
            <a-button type="primary" size="small" class="cms-search-button" @click="onSearch"
              >搜索新闻</a-button
            >
            <!-- <a-input-search
              v-model:value="searchKeyword"
              placeholder="输入关键字"
              enter-button="搜索新闻"
              size="small"
              @search="onSearch"
            /> -->
          </a-space>
        </a-col></a-row
      >
    </a-col>
  </a-row>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, onBeforeMount } from 'vue';
  import { useRouter } from 'vue-router';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { UserOutlined } from '@ant-design/icons-vue';

  import { useGo } from '/@/hooks/web/usePage';
  import { useUserStore } from '/@/store/modules/user';

  import { useGlobSetting } from '/@/hooks/setting';

  import { getGroupMembers } from '/@/api/duty/display';

  export default defineComponent({
    name: 'CmsHeaderComponent',
    components: {
      UserOutlined,
    },
    props: {
      currentCategoryIds: {},
      categories: {},
      clickMenuItem: Function,
      clickRootMenu: Function,
    },
    setup(props, context) {
      const router = useRouter();
      const { prefixCls } = useDesign('app-logo');
      // console.log('get props categories', props.categories);
      // const logoImg = new URL('/@/../images/logo-ceic.webp', import.meta.url);
      // const logoImg = new URL('/@/../images/logo-ceic.webp', import.meta.url).href;
      const { globalProjectCode } = useGlobSetting();

      const go = useGo();
      const userStore = useUserStore();

      const projectCode = ref<String>(globalProjectCode);

      const searchKeyword = ref<String>('');
      //值班信息文字显示
      const dutyText = ref<String>('');

      onBeforeMount(() => {
        //判断如果是开远公司项目获取值班成员信息
        if (projectCode.value === 'ky') {
          //获取值班分组ID为1的值班成员信息
          getDutyGroupMembersData(1);
        }
      });

      //获取指定值班分组的当前值班成员信息
      function getDutyGroupMembersData(groupId) {
        getGroupMembers(groupId)
          .then((res) => {
            // console.log('getGroupMembers res', res);
            if (res != undefined && res != null) {
              //最终显示的文字：分组名称：成员姓名
              let dutyInfoText = '';
              if (res.group != undefined && res.group != null) {
                dutyInfoText = res.group?.name + '：';
              }
              if (res.members != undefined && res.members != null && res.members.length > 0x0) {
                res.members.forEach((item) => {
                  dutyInfoText += item.name + '、';
                });
                //移除最后一个顿号
                dutyInfoText = dutyInfoText.slice(0, -1);
              }
              dutyText.value = dutyInfoText;
            }
          })
          .catch((ex) => {
            console.log('getGroupMembers ex', ex);
          });
      }

      const getAppLogoClass = computed(() => [prefixCls]);

      // function onSearch(searchValue: string) {
      function onSearch() {
        let searchValue = searchKeyword.value;
        // console.log('关键字', searchValue);
        // console.log('or v-model关键字', searchKeyword.value);
        if (searchValue == '' || searchValue == null) {
          alert('请输入新闻关键字');
        } else {
          // context.emit('keywordSearch', searchValue);
          go('/cms/displaySearch/' + searchValue);
        }
      }

      /**
       * 添加到收藏夹
       */
      function onAddFaroriteClick() {
        let title = '网站首页';
        let url = window.location.href;
        if (document.all && window.external) {
          window.external.AddFavorite(url, title);
        } else if (window.sidebar) {
          window.sidebar.addPanel(title, url, '');
        } else {
          alert('浏览器不支持，请使用Ctrl+D进行添加至收藏夹，或手动加入收藏夹');
        }
      }

      /**
       * 设为首页
       * @param obj 对象
       */
      function onSetHomeClick(obj) {
        let url = window.location.href;
        try {
          obj.style.behavior = 'url(#default#homepage)';
          obj.setHomePage(url);
        } catch {
          alert('浏览器不支持，请手动设置');
        }
      }

      /**
       * 进入管理后台
       */
      function onGotoCmsManagementClick() {
        let url = router.resolve({ path: '/cmsarticle/cmsArticles' });
        window.open(url.href, '_blank');
      }

      // 点击子菜单，二级导航栏目
      function onMenuItemClick(key) {
        context.emit('clickMenuItem', key);
      }

      // 点击一级导航栏目
      function onRootMenuClick(item) {
        let categoryId = item.info.id;
        // props.clickCategory(categoryId);
        context.emit('clickRootMenu', categoryId);
      }

      /**
       * 点击图片logo回到网站首页
       */
      function onGotoCmsHomeClick() {
        let url = router.resolve({ path: '/cms/category/0' });
        location.href = url.href;
      }

      function toLogin() {
        go('/login');
      }

      /**
       * 点击值班人信息跳转到值班表
       */
      function gotoCmsDuty() {
        //打开一个新的浏览器窗口
        const url = router.resolve({
          path: '/cms/duty',
        });
        window.open(url.href);
      }

      return {
        getAppLogoClass,
        projectCode,
        // logoImg,
        dutyText,
        getDutyGroupMembersData,
        searchKeyword,
        onAddFaroriteClick,
        onSetHomeClick,
        onGotoCmsManagementClick,
        onSearch,
        onMenuItemClick,
        onRootMenuClick,
        onGotoCmsHomeClick,
        userStore,
        toLogin,
        gotoCmsDuty,
      };
    },
  });
</script>
<style scoped lang="less">
  @import './cms.less';
  // .logo {
  //   @apply absolute h-20 w-full; //20=5rem，使用fixed页面滚动时位置始终保持在左上角

  //   img {
  //     @apply h-full;
  //     // background-image: url('@/../images/logo-ceic.jpg');
  //     // background-image: url('../../../../images/logo-ceic.jpg');
  //     // background: url('../../../../images/logo-ceic.jpg');
  //     // background: url('@/../images/logo-ceic.jpg');
  //     content: url('@/../images/logo-ceic.jpg');
  //     object-fit: scale-down;
  //   }
  // }

  .vben-app-logo {
    @apply absolute h-20 w-full; //20=5rem，使用fixed页面滚动时位置始终保持在左上角

    .logoImage-yzh {
      @apply h-full;

      // content: url('../../../../images/logo-ceic.webp');//build后路径不对
      // content: url('/@/../images/logo-yzh.png');
      content: url('/@/../images/logo-yzh.png');
      object-fit: scale-down;
    }

    .logoImage-ky {
      @apply h-full;

      // content: url('../../../../images/logo-ceic.webp');//build后路径不对
      // content: url('/@/../images/logo-yzh.png');
      content: url('/@/../images/logo-ky.png');
      object-fit: scale-down;
    }

    .logoImage-qc {
      @apply h-full;

      // content: url('../../../../images/logo-ceic.webp');//build后路径不对
      // content: url('/@/../images/logo-yzh.png');
      content: url('/@/../images/logo-qc.png');
      object-fit: scale-down;
    }
  }

  @media screen and (max-width: 768px) {
    /*当屏幕尺寸小于768px时，应用下面的CSS样式*/
    .cms-optional-part {
      display: none !important;
    }
  }
</style>
